<template>
  <div class="home-content">
    <div class="layout-reactive">
      <div class="content-slide">
        <div class="slide-image">
          <swiper ref="recommendSwiper" class="el-swiper" :options="swiperOptions">
            <swiper-slide v-for="item in recommends" :key="item.id">
              <img class="swiper-image" :src="item.pic ? `http://36.152.9.59:8090/single_img/?url=${item.pic}&dw=300&dh=300` : require('../../assets/images/content1.jpg')" />
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
          <a :href="recommendItem.url" target="_blank">
            {{recommendItem.name}}
            <i class="el-icon-d-arrow-right" />
          </a>
        </div>
        <div class="slide-content">
          <h5> <span class="line" /> &emsp;资讯生活 </h5>
          <h4>尊重自然，守护自然，以科技手段，构建智慧自然保护地，促进生物多样性发展</h4>

          <div class="content-swiper">
              <ul class="swiper--list">
                <li class="swiper-item" v-for="item in contents" :key="item.title">
                  <div class="swiper-item-inner">
                    <div class="swiper-image" v-html="item.icon">
                    </div>
                    <div class="swiper-content">
                      <h5>{{item.title}}</h5>
                      <p>{{item.desc}}</p>
                    </div>
                    <a class="read-more" :href="item.link" target="_blank">点击进入</a>
                  </div>
                </li>
              </ul>
              <span class="indicator indicator-prev">
                <i class="el-icon-d-arrow-left" />
              </span>
              <span class="indicator indicator-next">
                <i class="el-icon-d-arrow-right" />
              </span>
          </div>
        </div>
      </div>

      <ul class="content-total">
        <li class="content-total-item">
          <div class="total-title">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" viewBox="0 0 576 512" width="58" height="58"><path d="M546.2 9.7c-5.6-12.5-21.6-13-28.3-1.2C486.9 62.4 431.4 96 368 96h-80C182 96 96 182 96 288c0 7 .8 13.7 1.5 20.5C161.3 262.8 253.4 224 384 224c8.8 0 16 7.2 16 16s-7.2 16-16 16C132.6 256 26 410.1 2.4 468c-6.6 16.3 1.2 34.9 17.5 41.6 16.4 6.8 35-1.1 41.8-17.3 1.5-3.6 20.9-47.9 71.9-90.6 32.4 43.9 94 85.8 174.9 77.2C465.5 467.5 576 326.7 576 154.3c0-50.2-10.8-102.2-29.8-144.6z"></path></svg>
            </span>
            <span class="text">全部物种</span>
          </div>

          <CountTo class="count-value" :startVal='0' :endVal='totals.total' :duration='1000' />
        </li>
        <li class="content-total-item">
          <div class="total-title">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" viewBox="0 0 576 512" width="58" height="58"><path d="M569.354 231.631C512.969 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-75.162 0-136-60.827-136-136 0-75.162 60.826-136 136-136 75.162 0 136 60.826 136 136 0 75.162-60.826 136-136 136zm104-136c0 57.438-46.562 104-104 104s-104-46.562-104-104c0-17.708 4.431-34.379 12.236-48.973l-.001.032c0 23.651 19.173 42.823 42.824 42.823s42.824-19.173 42.824-42.823c0-23.651-19.173-42.824-42.824-42.824l-.032.001C253.621 156.431 270.292 152 288 152c57.438 0 104 46.562 104 104z"></path></svg>
            </span>
            <span class="text">濒危物种</span>
          </div>

          <CountTo class="count-value" :startVal='0' :endVal='totals.danger' :duration='1000' />
        </li>
        <li class="content-total-item">
          <div class="total-title">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" viewBox="0 0 512 512" width="56" height="56"><path d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"></path></svg>
            </span>
            <span class="text">入侵物种</span>
          </div>

          <CountTo class="count-value" :startVal='0' :endVal='totals.invade' :duration='1000' />
        </li>
        <li class="content-total-item">
          <div class="total-title">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" viewBox="0 0 512 512" width="56" height="56"><path d="M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z"></path></svg>
            </span>
            <span class="text">调查事件</span>
          </div>

          <CountTo class="count-value" :startVal='0' :endVal='totals.events' :duration='1000' />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getHomeTotals, getHomeRecommend } from '@/api'
import CountTo from 'vue-count-to';
export default {
  name: "HomeContent1",
  components: {
    CountTo
  },
  data() {
    return {
      swiperOptions: {
        effect: 'cube',
        loop: true,
        grabCursor: true,
        cubeEffect: {
          shadow: true,
          slideShadows: true,
          shadowOffset: 20,
          shadowScale: 0.94
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      contents: [
        {
          title: '宣传资讯',
          desc: '对本地调查等各类调查事件进行统一定义',
          link: 'https://www.baidu.com/',
          icon: '<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" viewBox="0 0 576 512" width="100" height="100"><path d="M573.19 402.67l-139.79-320C428.43 71.29 417.6 64 405.68 64h-97.59l2.45 23.16c.5 4.72-3.21 8.84-7.96 8.84h-29.16c-4.75 0-8.46-4.12-7.96-8.84L267.91 64h-97.59c-11.93 0-22.76 7.29-27.73 18.67L2.8 402.67C-6.45 423.86 8.31 448 30.54 448h196.84l10.31-97.68c.86-8.14 7.72-14.32 15.91-14.32h68.8c8.19 0 15.05 6.18 15.91 14.32L348.62 448h196.84c22.23 0 36.99-24.14 27.73-45.33zM260.4 135.16a8 8 0 0 1 7.96-7.16h39.29c4.09 0 7.53 3.09 7.96 7.16l4.6 43.58c.75 7.09-4.81 13.26-11.93 13.26h-40.54c-7.13 0-12.68-6.17-11.93-13.26l4.59-43.58zM315.64 304h-55.29c-9.5 0-16.91-8.23-15.91-17.68l5.07-48c.86-8.14 7.72-14.32 15.91-14.32h45.15c8.19 0 15.05 6.18 15.91 14.32l5.07 48c1 9.45-6.41 17.68-15.91 17.68z"></path></svg>'
        },
        {
          title: '工具与应用',
          desc: '定义数据分析方案、对各类物种数据进行专题分析',
          link: 'https://www.baidu.com/',
          icon: '<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" viewBox="0 0 512 512" width="100" height="100"><path d="M464 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zM128 120c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm288-136v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12z"></path></svg>'
        }
      ],
      totals: {
        total: 0,
        danger: 0,
        invade: 0,
        events: 0
      },
      recommends: [
        { "id":1, "name":"白鹭1", "url":"http://mkbjoepfh.mv/gwmhf", "pic":"" },
        { "id":2, "name":"白鹭2", "url":"http://mkbjoepfh.mv/gwmhf", "pic":"" },
        { "id":3, "name":"白鹭3", "url":"http://mkbjoepfh.mv/gwmhf", "pic":"" },
        { "id":4, "name":"白鹭4", "url":"http://mkbjoepfh.mv/gwmhf", "pic":"" },
      ],
    }
  },
  computed: {
    swiper() {
      return this.$refs.recommendSwiper?.$swiper
    },
    recommendItem(){
      let activeIndex = 0
      if(this.swiper){
        activeIndex = this.swiper.activeIndex
      }
      return this.recommends[activeIndex]
    },
  },
  methods: {
  },
  created(){
    try {
      getHomeTotals().then(res => {
        if(res){
          this.totals = res
        }
      })
      getHomeRecommend().then(res => {
        if(res){
          this.recommends = res
        }
      })
    } catch (error) {
      console.log('error: >>', error)
    }
  }
};
</script>

<style lang="scss">
.home-content{
  padding: 50px 0;
  background-color: rgb(221,226,203);
  background-image: url('../../assets/images/home_bg.png');
  background-size: 274px 128px;
  background-position: 2px 2px;
  background-repeat: no-repeat;
  .content-slide{
    display: flex;
    align-items: center;
    .slide-image{
      width: 20%;
      margin: 0 10%;
      text-align: center;
      .swiper-slide{
        img{
          display: block;
          max-width: 100%;
          max-height: 100%;
          box-shadow: 2px 2px 10px rgba(0,0,0,.1);
        }
      }
      a{
        display: inline-block;
        color: var(--primary-color);
        margin: 20px auto 0;
        padding-bottom: 4px;
        text-decoration: none;
        border-bottom: 2px solid var(--primary-color);
      }
    }

    .slide-content{
      flex: 1;
      min-width: 0;
      margin: 0 5%;
      & > h5 {
        font-size: 14px;
        line-height: 30px;
        display: flex;
        align-items: center;
        color: var(--primary-color);
        .line{
          width: 30px;
          height: 2px;
          background-color: var(--primary-color);
        }
      }
      & > h4 {
        height: 80px;
        font-size: 20px;
        width: 80%;
        margin-bottom: 20px;
      }

      .content-swiper{
        position: relative;
        .swiper--list{
          list-style: none;
          display: flex;
          gap: 40px;
          .swiper-item{
            flex: 1;
            height: 300px;
            display: flex;
            background-color: #fff;
            box-shadow: 2px 2px 10px rgba(0,0,0,.1);
            align-items: center;
            justify-content: center;
            .swiper-item-inner{
              .swiper-image{
                margin: 0 auto;
                width: 100px;
                height: 100px;
                color: var(--primary-color);
                fill: var(--primary-color);
              }
              .swiper-content{
                text-align: center;
                h5{
                  margin-top: 10px;
                  font-size: 18px;
                }
                p{
                  margin-top: 10px;
                  font-size: 12px;
                  color: #999;
                }
                a{
                  text-decoration: none;
                }
              }
            }
          }
        }
        .indicator{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          padding: 8px;
          line-height: 1;
          color: #fff;
          background-color: var(--primary-color);
          border-radius: 50%;
          box-shadow: 2px 2px 10px rgba(0,0,0,.1);
          cursor: pointer;
        }
        .indicator-prev{
          left: -16px;
        }
        .indicator-next{
          right: -16px;
        }
      }
    }
    .read-more{
      display: block;
      width: 60px;
      margin: 20px auto 0;
      padding-bottom: 6px;
      text-decoration: none;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      color: var(--primary-color);
      border-bottom: 2px solid var(--primary-color);
    }
  }

  .content-total{
    list-style: none;
    margin: 50px 0 0;
    padding: 0;
    display: flex;
    .content-total-item{
      flex: 1;
      text-align: center;
      .total-title{
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          margin-bottom: 10px;
          .icon{
            text-shadow: rgba(98,190,3,.9) 0px 4px 6px;
            filter: drop-shadow(rgba(98, 190, 3, 0.99) 0px 4px 6px);
            & > svg {
              fill: var(--primary-color);
            }
          }
          .text{
            margin-left: 10px;
          }
      }
      .count-value{
        font-size: 30px;
      }
    }
  }
}
</style>